<template>
  <div :style="{ height: height + 'px' }">
    <div
      class="task-form"
      :style="visible ? { display: '' } : { display: 'none' }"
    >
      <div>
        <el-form
          ref="taskForm"
          :model="formData"
          label-position="left"
          label-width="80px"
          size="mini"
        >
          <input type="hidden" v-model="formData.id" />
          <el-form-item label-width="0px">
            <div class="task-context">
              <div
                class="task-context-edit"
                :style="{ color }"
                ref="taskContext"
                contenteditable="true"
                @focus="clearContext"
                @blur="contextBlur"
              >
                {{ formData.title || defaultText }}
              </div>
              <div class="task-context-toolbar">
                <record-audio />
                <upload-file type="file" />
                <upload-file type="image" />
                <upload-file type="video" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="状态" v-show="isMore" prop="finished">
            <div class="task-form-box">
              <el-checkbox
                :label="formData.finished ? '已完成' : '未完成'"
                v-model="formData.finished"
              ></el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="执行者" prop="executor">
            <el-select
              v-model="formData.executor"
              placeholder="请选择执行者"
              clearable
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截至时间" prop="time">
            <el-date-picker
              v-model="formData.time"
              type="datetime"
              placeholder="截至时间"
              clearable
              format="yyyy-MM-dd HH:mm"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注" v-show="isMore" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData.remarks"
              style="font-size:14px;"
              :rows="4"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="优先级" v-show="isMore" prop="priority">
            <priority
              v-model="formData.priority"
              defaultValue="4"
              :showIcon="false"
            />
          </el-form-item>
          <el-form-item label="标签" v-show="isMore" prop="tags">
            <div class="task-form-tag">
              <el-tag
                :key="tag"
                v-for="tag in formData.tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
                size="small"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-tag
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                effect="plain"
                >+ 新标签</el-tag
              >
            </div>
          </el-form-item>
          <div class="task-form-subtask" v-show="isMore">
            <sub-task-list v-model="subList" @itemClick="subClick" @itemDelete="subDelete" @setFinished="subFinished"/>
          </div>
          <div class="task-form-more">
            <span @click="isMore = !isMore">{{
              isMore ? "简化..." : "更多..."
            }}</span>
          </div>
          <el-form-item class="task-form-bottom" label-width="0px">
            <el-button @click="onOk(true)">完成并创建下一个</el-button>
            <el-button type="primary" @click="onOk(false)">完成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="创建任务"
      :visible.sync="subTask"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
    >
      <task-form @ok="subTaskOk" v-model="subTaskForm" />
    </el-dialog>
  </div>
</template>

<script>
import Priority from "../base/Priority.vue";
import RecordAudio from "../base/RecordAudio.vue";
import UploadFile from "../base/UploadFile.vue";
import SubTaskList from './SubTaskList.vue'
export default {
  name:"TaskForm",
  components: { RecordAudio, UploadFile, Priority, SubTaskList },
  model: {
    prop: "form",
    methods: ["ok", "back", "more"],
  },
  props: {
    visible: { type: Boolean, default: true },
    form: {
      type: Object,
      required: true,
    },
    height: { type: Number },
  },
  data() {
    return {
      subList:[],
      subTask:false,
      subTaskForm:{},
      user:JSON.parse(window.sessionStorage.getItem('user')),
      defaultText:
        "请在这里填写工作内容，也可以通过下面工具栏发送语音、图片、文件和视频",
      color: "#aaa",
      isMore: false,
      formData: {
      },
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.formData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    clearContext(e) {
      if (e.target.innerText == this.defaultText) {
        e.target.innerText = "";
      }
      this.color = "#000";
    },
    contextBlur(e) {
      if (e.target.innerText == "") {
        e.target.innerText = this.defaultText;
        this.color = "#aaa";
      }
    },
    onOk(createTask = false) {
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          this.$emit("ok", { ...this.formData,title:this.$refs.taskContext.innerText.trim()==this.defaultText ? '' : this.$refs.taskContext.innerHTML }, createTask);
          this.$emit("input", { ...this.formData });
          this.$refs["taskForm"].resetFields();
          this.$refs.taskContext.innerHTML = "";
        } else {
          return false;
        }
      });
    },
    subTaskOk(item){
      this.subTask=false
      console.log(item)
    },
    onBack(e) {
      this.$emit("back", e);
    },
    onMore(e) {
      this.$emit("more", e);
    },
    initData() {
      this.formData = {
        id:'',
        title: "",
        leader: "",
        executor:this.user.id,
        executorName:this.user.name,
        finished: false,
        time: new Date(),
        priority: "4",
        remarks:'',
        tags:[],
        type: "todo",
        ...this.form,
      };
      if (
        this.formData.title != "" &&
        this.formData.title != this.defaultText
      ) {
        this.color = "#000";
      }
    },
    subFinished(item){
      item.finished = !item.finished
    },
    subClick(item){
      this.subTask = true
      this.subTaskForm = item
    },
    subDelete(item){
      console.log(item)
    }
  },
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
    this.initData();
  },
  watch: {
    "form.id"(val) {
      this.initData();
    },
    "form.title"(val) {
      this.initData();
    },
    "form.time"(val) {
      this.initData();
    },
  },
};
</script>

<style lang="less" scoped>
.task-form {
  padding: 10px 20px;
}
.title {
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  background-color: #223f59;
  overflow: hidden;
  text-align: center;
  span {
    margin-left: 10px;
    color: #fff;
  }
}
.task-title-icon {
  width: 32px;
  flex: 0 0 32px;
  justify-content: start;
  margin-top: 5px;
  color: #fff;
}
.task-current {
  width: 100%;
  display: block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  span {
    margin-bottom: -10px;
  }
}
.task-title-text {
  width: 100%;
}
.task-title-back-btn {
  width: 32px;
  flex: 0 0 32px;
  justify-content: start;
  cursor: pointer;
  text-align: center;
  color: #fff;
}
.task-title-back-more {
  width: 32px;
  flex: 0 0 32px;
  justify-content: end;
  cursor: pointer;
  text-align: center;
  color: #fff;
}
.task-form-title {
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  background-color: #223f59;
}
.task-context {
  background-color: #ececec;
  padding: 5px;
  border-radius: 5px;
}
.task-context-edit {
  // border: #d8d8d8 solid 1px;
  // background-color: #fff;
  border-radius: 3px;
  padding: 0px 10px;
  margin-bottom: 5px;
}
.task-context-toolbar {
  background-color: #f8f8f8;
  border-radius: 3px;
  height: 20px;
  line-height: 20px;
  padding: 0px 10px;
}
.task-form-box {
  background-color: #ececec;
  padding: 3px 10px;
  border-radius: 5px;
  width: fit-content;
}
.task-form-tag {
  background-color: #fff;
  border: #ececec solid 1px;
  padding: 3px;
  border-radius: 5px;
  width: fit-content;
}
.task-form-subtask {
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  box-sizing: border-box;
}
.el-tag + .el-tag {
  margin-left: 5px;
}
.button-new-tag {
  margin-left: 5px;
  padding-top: 0;
  padding-bottom: 0;
  cursor: pointer;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.task-form-more {
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  span {
    cursor: pointer;
    color: #1989fa;
  }
}
.task-form-bottom {
  text-align: center;
}
</style>
